<template>
    <div class="app-container calendar-list-container">
      <!-- filter 条件查询 -->
      <div class="filter-container">
        <el-input
          clearable
          @keyup.enter.native="handleFilter"
          v-model="listQuery.nickName"
          style="width: 200px; margin-right: 15px; margin-top: 7px"
          class="filter-item"
          placeholder="请输入用户名"
        />
        <el-input
          clearable
          @keyup.enter.native="handleFilter"
          v-model="listQuery.userPhone"
          style="width: 200px; margin-right: 15px; margin-top: 7px"
          class="filter-item"
          placeholder="请输入手机号"
        />
  
        <el-select
          v-model="listQuery.isFlag"
          placeholder="请选择考核状态"
          clearable
          class="filter-item"
          style="width: 200px; margin-right: 15px; margin-top: 7px"
        >
          <el-option label="待审核" value="0"></el-option>
          <el-option label="已退款" value="1"></el-option>
        </el-select>
  
        <el-date-picker
          v-model="dateTime"
          type="datetimerange"  
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd HH:mm:00"
          @change="getDateTime"
        >
        </el-date-picker>

        <el-button
          type="primary"
          v-waves
          icon="el-icon-search"
          @click="handleFilter"
          style="margin-left:15px"
          >查找</el-button
        >
        <!-- <el-button
          type="primary"
          @click="handleDownload"
          icon="el-icon-download"
          :loading="downloadLoading"
          >导出</el-button
        > -->
      </div>
      <!-- table 表格 -->
      <el-table
        :data="list"
        v-loading="loading.list"
        element-loading-text="给我一点时间"
        border
        fit
        highlight-current-row
        style="width: 100%"
      >
        <el-table-column type="index" label="序号" align="center" width="80px"/>
        <el-table-column label="用户名" prop="nickName" align="center" />
        <el-table-column label="手机号" prop="userPhone" align="center" />
        <el-table-column label="退款金额" prop="amount" align="center" />
        <el-table-column label="审核状态" prop="isFlag" align="center">
            <template slot-scope="scope">
            <div class="fx">
              {{
                scope.row.isFlag == 0
                ? "待审核":
                scope.row.isFlag == 1
                ? "已退款":"-"
              }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="120px"> 
              <template slot-scope="scope">
                   <el-button @click="getAudit(scope.row)"  size="mini" type="primary">审核</el-button>
              </template>
            </el-table-column>
      </el-table>
      <!-- 确认退款 -->
      <el-dialog title="退款审核" :visible.sync="dialog1.add" width="30%">
        <el-form
          :model="refundQuery"
          :rules="bindRules"
          ref="bindForm"
          label-position="right"
          label-width="120px"
        >
          <el-form-item label="用户名" prop="nickName">
            <el-input
              clearable
              disabled
              v-model="refundQuery.nickName"
              style="width: 300px;"
            ></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="userPhone">
            <el-input
              clearable
              disabled
              v-model="refundQuery.userPhone"
              style="width: 300px;"
            ></el-input>
          </el-form-item>
          <el-form-item label="退款金额" prop="amount">
            <el-input
              clearable
              disabled
              v-model="refundQuery.amount"
              style="width: 300px;"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialog1.add = false">取消</el-button>
          <el-button type="primary" :loading="loading.add" @click="refundReview"
            >确定</el-button
          >
        </div>
      </el-dialog>
      <!-- pagination 分页 -->
      <div class="pagination-container">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="listQuery.pageNum"
          :page-sizes="[10, 20, 30, 40, 100, 300, 500]"
          :page-size="listQuery.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>
  </template>
  
  <script>
  import { refundList,refundReview } from "@/api/financial";
  export default {
    name: "refundReview",
    data() {
  
      return {
        dateTime: "",
        total: 0,
        listQuery: {
          pageNum: 1,
          pageSize: 10,
        },
        refundQuery: {
        },
        dialog1: {
          add: false,
        },
        list: null,
        loading: {
          list: false,
          download: false,
        },
        downloadLoading: false,
      };
    },
    methods: {
        // 点击按钮审核
        getAudit(row){
            this.refundQuery = Object.assign({},row)
            this.dialog1.add = true
        },
      getDateTime(value) {
        if (value) {
          this.listQuery.cTime = value[0];
          this.listQuery.eTime = value[1];
        } else {
          this.listQuery.cTime = "";
          this.listQuery.eTime = "";
        }
      },
      //导出
      handleDownload() {
        this.downloadLoading = true;
        import("@/vendor/Export2Excel").then((excel) => {
          const tHeader = [
            "昵称",
            "手机号",
            "月卡类型",
            "设备编号",
            "省市",
            "支付流水号",
            "金额(元)",
            "使用时长(小时)",
            "过期时长(天)",
            "支付类型",
            "下单时间",
          ];
          const filterVal = [
            "nickName",
            "userPhone",
            "cardTypeInfo",
            "equipmentNumberInfo",
            "address",
            "outTradeNo",
            "amountInfo",
            "useTimeQuantumInfo",
            "timeDay",
            "payTypeInfo",
            "ctime",
          ];
          const data = this.formatJson(filterVal, this.list)
          excel.export_json_to_excel({
            header: tHeader,
            data,
            filename: "月卡订单列表",
          });
          this.downloadLoading = false;
        });
      },
  
      // 数据筛选
      formatJson(filterVal, jsonData) {
        return jsonData.map((v) =>
          filterVal.map((j) => {
            return v[j];
          })
        );
      },
      // 确认审核
      async refundReview() {
        this.$refs["bindForm"].validate(async (valid) => {
          if (valid) {
            try {
              let query = Object.assign({},this.refundQuery)
              //调用服务器接口
              const { data } = await refundReview(query)
              this.$message({
                type: "success",
                message: data.msg,
              });
              this.dialog1.add = false;
              this.refundList();
            } catch (error) {
            }
          }
        });
      },
      // 获取退款审核列表
      async refundList() {
        this.loading.list = true;
        try {
          //调用服务器接口
          const { data } = await refundList({ ...this.listQuery });
          this.list = data.records
          this.total = data.total;  
        } catch (error) {}
        this.loading.list = false;
      },
      handleFilter() {
        this.listQuery.pageNum = 1;
        this.refundList();
      },
      handleSizeChange(val) {
        this.listQuery.pageSize = val;
        this.refundList();
      },
      handleCurrentChange(val) {
        this.listQuery.pageNum = val;
        this.refundList();
      },
      formatDate(date, pageNum) {
        if (date && typeof date == "object") {
          const d = date[pageNum];
          return new Date(d).getTime();
        }
        return "";
      },
    },
    created() {
      this.refundList();
    },
  };
  </script>
  